<template>
  <div class="resource-main-box new-page">

    <a-form-model layout="inline" class="comm-search-f" :model="search" :style="`width: calc(100% - ${sideMenuWidth} - 33px)`">
      <!-- 筛选条件与查询 -->
      <a-form-model-item label="">
        <a-input
          v-model="search.name"
          style="minWidth: 130px"
          placeholder="搜索"
        />
      </a-form-model-item>

      <a-form-model-item>

        <a-button
          type="primary"
          class="ml-15"
          @click="getData"
        >
          刷新
        </a-button>
      </a-form-model-item>
    </a-form-model>

    <div class="pt-16 pl-16 pb-16">
      <a-button
        type="primary"
        ghost
        @click="createNewEmail"
      >
        创建新消息
      </a-button>
    </div>
    <a-table
      :columns="columns"
      :row-key="(row,index) =>row.id+index"
      :data-source="NotificationList"
      :loading="NotificationLoading"
      :pagination="{
        showTotal:(total)=> `共 ${total} 条数据`,
        showSizeChanger: true,//设置每页显示数据条数
        showQuickJumper: true,
        size:'big',
        current:pagination.pageNum,
        pageSize:pagination.pageSize,
        total:pagination.total
      }"
      @change="onChangePage"
    />
  </div>
</template>
<script>
import { mapGetters, mapActions, mapState, mapMutations } from 'vuex';
export default {
  data() {
    return {
      search: {},
      columns: Object.freeze([
        {
          title: '消息名称',
          dataIndex: 'name',
          align: 'left'

        },
        {
          title: '航空公司',
          align: 'left',
          dataIndex: 'airline',
          customRender: (value, record) => {
            const airline = value.flatMap(item => item.airlineName);
            return airline.join();
          }
        },
        {
          title: '机型',
          align: 'left',
          dataIndex: 'model',
          customRender: (value, record) => {
            const model = value.flatMap(item => item.model);
            return model.join();
          }
        },
        {
          title: '邮件',
          align: 'left',
          dataIndex: 'emails',
          width: 520,
          customRender: (value, record) => {
            return value.join();
          }
        },
        // {
        //   title: 'AHM Nofify App User',
        //   align: 'left',
        //   dataIndex: 'User'
        // },
        {
          title: '拥有者',
          align: 'left',
          dataIndex: 'createBy'
        },
        {
          title: '更新者',
          align: 'left',
          dataIndex: 'updateBy'
        },
        {
          title: '更新时期',
          align: 'left',
          dataIndex: 'updateTime',
          customRender: (value, record) => {
            return this.$moment.utc(value).format('YYYY-MM-DD HH:mm:ss');
          }
        },
        {
          title: '设置',
          align: 'left',
          customRender: (value, record, index) => {
            return [
              <a-button type='link' onClick={() => this.editHandler(record)}>编辑</a-button>,
              <a-popconfirm
                title='确认删除此项?'
                ok-type='danger'
                ok-text='确认'
                cancel-text='取消'
                onConfirm={() => this.delItemHandler(record)}
              >
                <a-button type='link'>删除</a-button>
              </a-popconfirm>

              // <a-button type='primary' size='small' ghost>版本管理</a-button>
            ];
          }
        }
      ])
    };
  },
  computed: {
    ...mapGetters('setting', ['sideMenuWidth']),
    ...mapState('emailNotification', ['NotificationList', 'NotificationLoading', 'pagination'])

  },
  created() {
    this.setState({ key: 'pagination', payload: { ...this.pagination, pageNum: 1 }});
    this.onChangePage({ current: 1 });
  },
  methods: {
    ...mapMutations('emailNotification', ['setState']),
    ...mapActions('emailNotification', [
      'getNotificationList',
      'deleteItems',
      'submitEmail'
    ]),
    onChangePage({ current, pageSize = 10 }) {
      this.setState({ key: 'pagination', payload: { ...this.pagination, pageNum: current, pageSize }});
      this.getData();
    },
    createNewEmail() {
      localStorage.removeItem('emailRow');
      this.$router.push({ name: '新建邮件' });
    },
    async editHandler(row) {
      const airlineIds = (row?.airline ?? []).flatMap(item => item.airlineId);
      const arrivalAirportIds = (row?.airport ?? []).filter(item => item.depOrArr === 'arr').flatMap(item => item.airportId);
      const departureAirportIds = (row?.airport ?? []).filter(item => item.depOrArr === 'dep').flatMap(item => item.airportId);
      const fleetIds = (row?.fleet ?? []).flatMap(item => item.fleetId);
      const modelIds = (row?.model ?? []).flatMap(item => item.modelId);
      const tailnumberIds = (row?.airplane ?? []).flatMap(item => item.airplaneId);
      const fdeListIds = (row?.fdeList ?? []).flatMap(item => item.id);
      const alertListIds = (row?.alertList ?? []).flatMap(item => item.id);
      const mmsgListIds = (row?.mmsgList ?? []).flatMap(item => item.id);
      const smtListIds = (row?.smtList ?? []).flatMap(item => item.id);
      const mmoListIds = (row?.mmoList ?? []).flatMap(item => item.id);
      const newR = {
        ...row,
        // id: undefined,
        // airline: undefined,
        // airport: undefined,
        // airplane: undefined,
        // createBy: undefined,
        // createTime: undefined,
        // deleted: undefined,
        // fleet: undefined,
        // model: undefined,·
        // updateBy: undefined,
        // updateTime: undefined,
        ahmAction: 'And',
        airlineIds,
        alertListArr: row.alertList,
        fdeListArr: row.fdeList,
        mmsgListArr: row.mmsgList,
        smtListArr: row.smtList,
        mmoListArr: row.mmoList,
        alertList: alertListIds,
        fdeList: fdeListIds,
        mmsgList: mmsgListIds,
        smtList: smtListIds,
        mmoList: mmoListIds,
        arrivalAirportIds,
        departureAirportIds,
        fleetIds,
        modelIds,
        tailnumberIds
      };
      localStorage.setItem('emailRow', JSON.stringify(newR));

      this.$router.push({ name: '新建邮件' });
      // await this.submitEmail(newR);
      // this.getData();
    },
    getData() {
      this.getNotificationList(this.search);
    },
    async delItemHandler(e) {
      await this.deleteItems(e.id);
      this.setState({ key: 'pagination', payload: { ...this.pagination, pageNum: 1 }});
      this.getData();
    }
  }
};
</script>
<style lang="less" scoped>

</style>
